React Navigationのoptionの設定
React Navigation v5を使っている場合で以下のようなことをしたい場合にoptionsを設定することになる
headerの文言を表示したい、変更したい
headerに戻るボタンを表示したい
headerのスタイルを調整したい
bottomTabのアイコンを変えたい
etc.
概要とtl;dr
optionsの設定方法は3種類ある
①Stack.Navigatorのoptionsで指定
子のScreen全てに共通のoptionを書く
基本的には静的な感じになるのかな
動的にもできそうだが、条件分岐複雑なことはしないほうがいいだろうな、たぶんmrsekut.icon
②Stack.Screenのoptionsで指定
これもRouting設定のところに書く方法
基本的に静的なイメージ
③Scrren内のnavigationOptionsに書く
若干邪魔だが、動的に書くにはここしかない
④Tab
①Stack.Navigatorで設定
1つのNavigatorが管轄している全ての子Screenに同じ設定を適用したい場合はここに書く
screenOptionsで設定
screenOptionsには関数も取れるので、routeやnavigationを頑張れば、各Screen別に統一的な異なる設定もできる
code:ts
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ color, size }) => {
const icons = {
Home: 'home',
Profile: 'account',
};
return (
<MaterialCommunityIcons
color={color}
size={size}
/>
);
},
})}
<Tab.Screen name="Home" component={HomeScreen} />
</Tab.Navigator>
参考
Navigatorのpropsの一覧
Screenではなく
②Stack.Screenで設定
Routingの設定のところに書く
静的に書く場合はここ、と思っていたが違うのか #?? optionsで設定
code:ts
<Stack.Screen
options={{ title: 'My home' }}
/>
動的にも書ける
optionsを関数にするとrouteとnavigationを引数に取れるが、必要なのは前者のみ
code:ts
<Stack.Screen
options={({ route }) => ({ title: route.params.name })}
/>
optionsの項目
title
headerTitle
文字列またはコンポーネント
ここに書いているのか
参考
③各コンポーネント内で設定
StackNavigationOptions
code:tsx
const A = ({navigation}) => {
navigation.setOptions({
//
})
return (..)
}
ボタンを押したタイミングでタイトルを変更、のような動的なタイミングに依存する場合に使うなどもできる
code:ts
<Button
title="Update the title"
onPress={() => navigation.setOptions({ title: 'Updated!' })}
/>
参考
④Tabで設定
入れ子のNavigatorでoptionが設定されている場合にどういう挙動になるのか
入れ子になった場合はトップレベルでroute.steteのswtichをしないとうまく設定されない ref code:階層
Navigator
Screen // ここのoptionsで設定する
Navigator
Screen // ここのheaderを変えたい場合は↑
Screen
Scrren
Screen
Screenのoptionsか、navigation.setOptionsで対応できる
参考
スタイルを調整する
②をしているとき
キーとなる項目は
headerStyle
headerTintColor
戻るボタンやタイトルの色
headerTitleStyle
タイトルのfontFamily, fontWieightなどText向けのスタイル
code:階層
BttomTab.Navigator
BottomTab.Screen 各bottomTab
// 上部タブがある場合
ShopStack.Navigator
ShopStack.Screen
Tab.Navigator
Tab.Screen
Page
// 上部タブがない場合(mypage)
Stack.Navigator
Stack.Screen
Page
各optionの項目一覧を見たい
docsでも型でもいい
上部のタブのスタイルなど
タブの箇所は共通化したい
アイコンなどは共通化したくない
ヘッダー上に表示するアイコンなどは各ページによって異なるがどうやって設定すればいいノアk
ページによってはボトムタブを非表示にしたい
これ、統一したほうがいいのか、Screenごとに分けるべきなのか、悩みどころやなmrsekut.icon
optionってheaderの設定のみ？
それ以外のoptionsもあるの？
関連Docs
概要。最初に読むといい
Optionsの中でも主に基本的なヘッダーの設定について
Screenのoptionについて